<template>
  <div>
    <!-- <div class="info">
    <div class="info-left">
      <div>
        <img
          class="info-left-head"
          src="../../assets/img/title_logo - 副本.png"
          alt=""
        />
        <a>更换头像</a>
      </div>
    </div>
    <div class="info-right">
      <div class="info-right-item">
        <span class="info-right-item-title">用户名：</span>{{ user.name }}
        
      </div>

      <div class="info-right-item">
        <span class="info-right-item-title">用户类型：</span>普通用户
        <a>升级</a>
      </div>

      <div class="info-right-item">
        <span class="info-right-item-title">联系方式：</span>{{ user.phone }}
        <a>更改</a>
      </div>

      <div class="info-right-item">
        <span class="info-right-item-title">邮箱：</span>{{ user.email }}
        <a>更改</a>
      </div>

      <div class="info-right-item">
        <span class="info-right-item-title">密码：</span>***********
        <a>更改</a>
      </div>
    </div>
  </div> -->

    <div class="info">
      <little-title :title="`基本信息`"></little-title>
      <table class="info-base">
        <tr>
          <td class="info-base-title">头像</td>
          <td>
            <img src="../../assets/img/title_logo.png" alt="" />
            <a class="info-base-operate">更换头像</a>
          </td>
        </tr>
        <tr>
          <td class="info-base-title">用户名</td>
          <td>{{ user.name }}</td>
        </tr>
        <tr>
          <td class="info-base-title">用户类型</td>
          <td>普通用户 <a class="info-base-operate">升级</a></td>
        </tr>
      </table>

      <little-title :title="`账号信息`"></little-title>
      <table class="info-base">
        <tr>
          <td class="info-base-title">联系方式</td>
          <td>
            {{ user.phone }}
            <a class="info-base-operate" @click="showChangePhone">更改</a>
          </td>
        </tr>
        <tr>
          <td class="info-base-title">绑定邮箱</td>
          <td>
            {{ user.email }}
            <a class="info-base-operate">更改</a>
          </td>
        </tr>
      </table>

      <little-title :title="`密码设置`"></little-title>
      <table class="info-base">
        <tr>
          <td class="info-base-title">原始密码：</td>
          <td>
            ************
            <a class="info-base-operate">修改密码</a>
          </td>
        </tr>
      </table>

      <!-- 修改信息 -->
      <div>
        <!-- 修改手机 -->
        <a-modal
          title="更换联系方式"
          :visible="changePhone"
          @ok="changePhoneOk"
          @cancel="changePhoneCancel"
          :cancelText="`取消`"
          :okText="`下一步`"
        >
          <!-- 旧手机号发送验证码 -->
          <div v-if="step == 'phone1'" class="operation">
            <p class="operation-explain">
              验证码将发送到手机{{ user.phone }}，请注意查看。
            </p>
            <div class="operation-items">
              <span class="operation-title">填写验证码：</span>
              <a-input v-model="phoneCode1"></a-input>
              <a @click="sendMessageCode">获取短信验证码</a>
            </div>
          </div>
          <!-- 新手机号发送验证码 -->
          <div v-if="step == 'phone2'" class="operation">
            <div class="operation-items">
              <div>
                <span>输入新手机：</span
                ><a-input v-model="changeInfo.phone"></a-input>
              </div>
              <div>
                <span>输入验证码：</span><a-input v-model="phoneCode2"></a-input>
                <a @click="sendMessageCode">获取验证码</a>
              </div>
            </div>
          </div>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import LittleTitle from "../Components/LittleTitle.vue";
export default {
  components: { LittleTitle },
  props: {},
  data() {
    return {
      username: "",
      user: {
        name: "",
        phone: "",
        email: "",
        password: "",
        comfirmPass: "",
      },
      // 修改信息栏
      // 每一步的步骤
      step: "",
      changeInfo: {
        phone: "",
        email: "",
        oldPass: "",
        newPass: "",
      },

      // 更换手机
      changePhone: false,
      phoneCode1: "",
      phoneCode2: "",
    };
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    //事件函数的逻辑
    checkMail() {
      //邮箱验证的正则表达式
      let str = this.user.email;
      const reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      if (reg.test(str)) {
      } else {
        this.$message.warning("邮箱格式不正确，请输入正确的邮箱地址！");
      }
    },
    checkPhone() {
      let str = this.user.phone;
      const reg = /^0?(13[0-9]|14[5-9]|15[012356789]|166|17[0-8]|18[0-9]|19[8-9])[0-9]{8}$/;
      if (reg.test(str)) {
        // console.log('可用手机号！')
      } else {
        this.$message.warning("手机号格式不对，请重新输入！");
      }
    },
    async getUserInfo() {
      const res = await this.$_api.getUserInfo();
      console.log(res);

      const msg = res.data.message;
      if (msg == "成功") {
        this.user.name = res.data.data.user.username;
        this.user.phone = res.data.data.user.mobile;
        this.user.email = res.data.data.user.email;
      } else {
        this.$message.error("获取个人信息失败，请重试！");
      }
    },

    // 更换手机
    showChangePhone() {
      this.changePhone = true;
      this.step = "phone1";
      this.phoneCode1 = "";
      this.phoneCode2 = "";
    },
    changePhoneOk(e) {
      // 检查是否填写验证码，然后请求接口，看验证码是否正确，不正确重新发送验证码。正确进入下一个。
      switch (this.step) {
        // 手机号更新
        case "phone1":
          if (this.phoneCode1 == null || this.phoneCode1.length == 0) {
            this.$message.warning("请填入验证码！");
          } else {
            // TODO:验证码接口
            const res = "success";
            if (res == "success") {
              // 到下一步
              this.step = "phone2";
            } else {
              // 重新获取验证码重新验证
              this.$message.error("验证码错误，请重新输入！");
            }
          }
          break;
        case "phone2":
          if(this.changeInfo.phone == null || this.changeInfo.phone.length == 0){
            this.$message.warning("请输入新的手机号！");
          } else if (this.phoneCode2 == null || this.phoneCode2.length == 0) {
            this.$message.warning("请填入验证码！");
          } else {
            // TODO:检查验证码接口
            const res = "success";
            if (res == "success") {
              // TODO 验证码通过，进行手机更换，需要接口
              const msg = "success";
              if(msg == "success"){
                this.$message.success("手机号更换成功！");
                this.changePhone = false;
                this.getUserInfo();
              } else {
                this.$message.error("手机号更换失败，请重试！")
              }
            } else {
              // 重新获取验证码重新验证
              this.$message.error("验证码错误，请重新输入！");
            }
          }
          break;
      }
    },
    changePhoneCancel(e) {
      // console.log("Clicked cancel button");
      this.changePhone = false;
    },
    // 获取短信验证码
    sendMessageCode(){
      const res = "success";
      if(res == "success"){
        this.$message.success("验证码已发送！")
      }
    },

    back() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
// .info {
//   display: flex;

//   &-left {
//     padding: 20px;
//     width: 200px;
//     text-align: center;
//     margin-right: 20px;
//     border-right: 1px solid rgb(231, 231, 231);

//     &-head {
//       margin: 0 auto;
//       display: block;
//       width: 80px;
//     }
//     a {
//       display: inline-block;
//       margin: 10px 0;
//       &:hover {
//         text-decoration: underline;
//       }
//     }
//   }

//   &-right {
//     padding: 20px;
//     flex: 1;

//     &-item {
//       margin-bottom: 20px;
//       font-size: 16px;

//       &-title {
//         font-weight: 600;
//       }
//     }
//   }
// }

.info {
  &-base {
    width: 100%;

    tr:nth-child(2n) {
      background: rgb(245, 251, 255);
    }
    td {
      padding: 10px;
    }

    &-title {
      width: 120px;
      text-align: center;
      font-size: 12px;
      // font-weight: 600;
    }

    &-operate {
      margin-left: 10px;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.operation {
  &-explain {
    font-size: 14px;
    font-weight: 600;
  }

  &-items {
    input {
      display: inline-block;
      width: 200px;
      margin: 0 10px 4px 0;
    }
  }
}
</style>
